@charset "utf-8";
@import (reference) "base.less";
@w100: 100%;
@h155: 155px;
//宽高

@blue: #3bb7d9;
@orange:#e8604a;
@dorange:#eb4f3f;
@gray:#adadb3;
@dgray:#4f4f4f;
//颜色

.bw {background:none; }
//背景

.pr{ position:relative;}
.pa{ position:absolute;}
//定位

.p10 {padding: 10px;}
.plr10 {padding: 10px 0;}
//填充

.f14{font-size: 14px; }
.f15{font-size: 15px; }
.f16{font-size: 16px; }
.f17{font-size: 17px; }
//文字大小

.lh23{ line-height: 23px;}
//行高

.ac { text-align: center;}
.dib { display: inline-block; vertical-align: middle;}
.db { display:block;}
.df {  display:-webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; }
//排版

.wh100 { width: @w100; height: auto;}
//宽高

.receipt-info dd span {color:#4f4f4f; }
//赛事订单

.bg-cogray { background:#ebf4f9;}
.banner {
    height: @h155; width: @w100; 
    img{ height: @h155; width: @w100; }
    }
 //banner图
.apply{
    .ac;.lh23;
    h6{ 
        .f15; height: 30px; line-height: 30px; padding: 10px 0 5px; color: @blue;.pr; text-align: left;.p10;
    
        a{.pa; height: 30px; line-height: 30px; right: 10px; color: @gray; }
        img {.dib; height: 40%;}
    }
    
    .btn-style { background:#dadad8; color:#929292; }
    .bar{
         background:@gray;background-size:@w100 auto ; .pr;.wh100 ; height:3px; 
         
        p{
            background:@blue;
            .pa; height:@w100; top: 0; left: 0;
            background-size:auto @w100 ;
            }
        span {width:10px; height:10px; border-radius:50%; .pa; background:@blue;top:-3px; z-index:3;}
        span.gray{background:@gray;} 
        span:nth-child(1){ left:15%; }
        span:nth-child(2){ left:50%; }
        span:nth-child(3){ right:15%; }
        }
    // 赛事进度条
    .time {.f16; color: @orange; .ac; height: 50px; line-height: 50px; }
    ul{
        text-align: center;
        
        li{width: 49%; .f14;display: inline-block; vertical-align: top;}
        li:only-child{width: 100%; }
        a{ .db; width: 96%; margin: 2%; height: 43px; line-height: 43px; background: @blue; border-radius:22px;.f17; color: #fff;} 
    }
    .target {
        color:@blue; line-height:16px;font-size:12px;
        b{ color: @dgray; }
        }
    .target-aim {
        color:@blue; line-height:16px;font-size:15px;font-weight:bold; padding-top:5px;
        b{ color: @dgray; }
        }
    .count{ 
        color: @dgray; line-height: 30px;
        
        b{color: @orange;.f14;}
        span { color: #fff; background:@dgray; padding: 0 3px; .f16; }
    }
    .a-list { 
        .plr10; 
        
        a { height: 50px; border-radius:5px; line-height: 50px; .f17; .dib; width: 44%; margin:2%;}
        a:first-child {border: 1px solid #f7835c; background: #fef2ee; color: #f7835c;}
        a:nth-child(2){border: 1px solid @dorange; background: #fdedeb; color: @dorange;}
        a:nth-child(3){border: 1px solid #21a675; background: #e8f6f1; color: #21a675;}
        a:nth-child(4){border: 1px solid @blue; background: #ebf8fb; color: @blue;}
        a:nth-child(5){border: 1px solid #318bb9; background: #eaf3f8; color: #318bb9; width:94%;}
    }  
      
}
.btn-apply{
    background: #fff;
    position: relative; bottom: 0; height: 50px; line-height: 50px;font-size: 17px;color: #4f4f4f; padding-left: 10px;
    input,a{ 
      float: right; height: 50px; line-height: 50px; background: @blue; font-size: 17px; color: #fff; 
      width: 105px; .ac;
    }
    input.red ,a.red { background: #eb4f3f; width: 120px;}
  }
.btn-apply.pa { position: fixed; bottom: 0; left: 0; width: 100%; }
.apply-solo{
  
  dd{ 
       span,input, i{ .dib; .vm; }
       .mt5; padding:0 10px;
  }
  dt{ 
    color:@dgray; .f16; line-height: 50px; position: relative; padding-left: 20px;
    &:before { .pc; left:10px; height: 16px; width: 3px; background: @blue; top:15px; }
  }
  input[type=radio] { width: 16px; height: 16px; border-radius: 8px; border:1px solid #afb0b5; margin:5px; }
  input[type=radio]:checked{
    background: @blue;border:2px solid #fff;
    box-shadow: 1px 1px 0px 1px rgba(0,0,0,.1),-1px -1px 0px 1px rgba(0,0,0,.1), -1px 1px 0px 1px rgba(0,0,0,.1),1px -1px 0px 1px rgba(0,0,0,.1);
  }
  .solo-info{
    input[type=text] { background:#f5f7fa; width: 160px; height: 35px;outline: none; padding: 0 10px;}
    p{ margin-left: 28px;}
    dd:nth-of-type(1),
    dd:nth-of-type(2),
    dd:nth-of-type(3){
       height: 35px; line-height: 35px;
       span {width: 70px;}
    }
  }
   .solo-money{
    p{ margin-left: 28px;}
   
  }
  // 基本信息
  .commodity{
    .plr10;
    .chekbox { width: 22px; height: 22px; border-radius:50%; border:1px solid #afb0b5; margin:5px; appearance: none; padding: 0;}
    .chekbox.on { 
      background: url(../images/icon/ic_Draft-box_delete_press-min.png) no-repeat center center; background-size: 110% 110%;
      border: 1px solid @blue;
    }
    dd{
      .line-gray;padding-bottom: 10px;
      div { margin: 10px 0;}
      font-size: 16px; 
      img{ .dib;.vm;width: 30%; height: auto; margin:0 1%; max-height: 100px}
   }
   dd:last-child{ border: none;}
   .color-blue { float: right;}
   a{border:1px solid #adaeb4; border-radius: 3px; padding:3px 5px;}
   .sold{
      color: @gray;.pr;
      .color-blue{ color: @gray;}
      .ysq { background:#eb4f3f; color: #fff; padding: 3px 10px;.pa; z-index: 5; border: none;right:10px;top:3px; }
       div {
          .pr;
          &:before{ .pc; width: 100%; height: 100%; background: rgba(255,255,255,.5);z-index: 3;}
        }
    }
   
  }
  // 商品
.imgbig{
 position: fixed; z-index: 20; width: 100%;height: 100%; left: 0; top: 0; display: -webkit-box; display: box;
 -webkit-box-align:center; -webkit-box-pack:center; box-align:center; box-pack:center;
 img{ max-height: 100%; max-width: 100%; }
}

}
//报名模块

.order-title { 
    height: 35px; line-height: 35px; color: @gray; padding: 0 10px; .pr; background: #f5f7fa;border-top:1px solid #dadad8;
    
    a{ .pa; right:10px; height: 35px; line-height: 35px; color: @blue; }
    }
    
.bw {background:none; border-bottom:1px solid #dadad8  }
.buy { width: 76px; height: 35px; color: #fff; background: #eb4f3f; line-height: 35px;.dib;.ac;  border-radius: 16px; margin-left:8px;border:none; outline:none; }  
.arrows-down { width: 20px; height: 12px; float: right;background-size:20px 12px; }
//商品列表

.image-text {
    color: #676a6d; .f15; .p10; line-height: 23px;
    img {width: @w100; margin: 5px 0;}
    }
    
.c-expalain{
    color: @dgray;.f17; width: 35%; .ac; line-height: 35px;  margin:10px auto; font-weight: bold;.pr; 
    span{border: 1px solid #adadb3; height:35px;border-radius: 18px;.db;background: #fff;.pr;z-index: 1;  }
    }
.c-expalain:after {.pa; content:""; height: 0; width:400%; border-top:1px solid #adadb3; top:50%;left: -207%; }
//赛事说明
    
.data-rank{
    .ac;.f14; line-height: 23px;
    b{font-size: 20px;}
    li{ padding:10px; display: inline-block;}
    span{.db; font-size: 10px;}
}

.rank-mileage {
    h6 {
        .df; height: 40px; line-height: 40px;.f14;justify-content: space-around;
        a{color: @gray;}
        }
     h6.all {
        .f16; background: #f5f7fa; 
        a { width: 49.5%; .ac; border-bottom: 1px solid #dadad8;}
        }
     //ul{ display: none;}
    }
//赛事排行

.bg_blue {
    h6.all{
         background: none; border: none;
        a{ color: #28788e;}
    }
    h6 a.line{border-color: #FFF; color: #fff;}
}
.certificate {
    width:98%; margin: 10px auto; padding:40% 0%;.pr;
    background: url(../images/bg/zhengshu_tou-min.png) no-repeat center top,
    url(../images/bg/zhengshu_weiba-min.png) no-repeat center bottom,
    url(../images/bg/zhengshu_zhong-min.png) repeat-y center center;
    background-size: 100% auto, 100% auto, 100% auto;
    
    ul { padding: 0 10%;}
    ul:first-child{margin-top: -35px;}
    li { margin: 0;}
    .competitor {
        .db;
        
        li{ padding:5px 0;align-items:stretch;}
        span {width: 30%; .f14;.dib; text-align: right; padding-right: 3%;}
        p {width: 63%;.f16; font-weight: bold; padding-left: 2%;.dib; border-bottom: 1px solid @dgray; line-height: 35px;}
        
        li:only-child{
            padding-top: 10px; 
            
            span {vertical-align: baseline;}
            p {vertical-align: baseline; line-height: 23px;}
            }
      }
      .host {
        .pa; bottom: 30px; right: 10%; height: 10%;max-height:90px;
        *{display: inline-block; vertical-align: top; }
        span{padding-right: 10px;}
        img {height: 100%; max-width: 100px; }
      }
    }
 
//证书
.c-mask {
    position: fixed; width: @w100;height: @w100; background: rgba(0,0,0,.5);top: 0; left: 0;z-index:20;
    
    .pop-up {border-radius:10px; background:#f5f7fa; width: 88%; margin: 0 auto; .pr; .ac; top: 10%; padding:20px 0; }
    .close { 
        .pa; right: -10px; top: -10px; width: 24px; height: 24px; border: 3px solid #fff; background: @blue; color: #fff;
        border-radius:50%;.ac; line-height: 24px; font-size:30px;
        }

    input[type=text],
    input[type=password] {
          height: 43px; line-height: 43px; border-radius: 22px; width: 80%; margin-top:10px; outline: none;
          border: 1px solid @gray; padding: 0 5%;
        }
        #select-mod{
          .p10; padding-top:0; margin:0 auto;
          height: 43px; line-height: 43px; border-radius: 22px; width: 80%; margin-top:10px; outline: none;
          border: 1px solid @gray; padding: 0 5%;background:#fff;.f14; color:@gray;
        }
    li {
          text-align:left;color:@gray;
          height: 43px; line-height: 43px; border-radius: 22px; width: 80%; margin-top:10px; outline: none;
          border: 1px solid @gray; padding: 0 5%; margin:0 auto;background:#fff;
        }
    input[type=botton],
    input[type=submit]{ 
          background: @blue; width:90% ; border: none; font-size: 20px; .ac;
          color: #fff; margin-top:20px;height: 43px; line-height: 43px; border-radius: 22px;
        }
    input[type=radio]{ background: @blue; width:20px ; border: none; .dib;color: #fff; margin-left:20px;height:20px; border-radius: 50%;}
    input[type=radio]:checked{  width:20px; height:20px; background:#fff; border-radius:50%; border:6px solid  @blue;}
    h1{
        .f14; color: @gray;
        
        p { .dib; .pr;.ac; }
        .left-line{ width: 82px; height: 12px; background: url(../images/icon/l-min.png); .dib;.pa;left:-86px;  top:50%; margin-top:-6px;}
        .right-line{background: url(../images/icon/r-min.png); width: 81px; height: 12px; .dib;right:-86px; top:50%; margin-top:-6px;.pa;}
      }
    .pop-commodity {
        width:100%; position:absolute; left:0; bottom:0; background:#fff; z-index:20;
        dl{padding: 15px 0}
        .close { background:none; border:none; color:#000; margin:0; right:0px; top:0px; z-index:30;}
        dt{
          padding-left:10px; height: 25px; line-height: 25px; margin-top: 10px;
          &:before{display: none;}
        }
        a{ .dib;.vm; width: 50px; height: 25px; line-height: 25px;.ac; border:1px solid @gray; margin-right: 10px;}
        a.on{border:1px solid @blue; background: @blue; color: #fff; }
        input { width:100%; border-radius:0; height:50px; line-height:50px;} 
        }
   
    }

.order-list {
  dt { 
    line-height:30px; .f14;.p10;color:#4f6a7f; font-size: 16px;
    span { float:right; }
    // border-bottom:1px solid #d8e9eb;
    }
  .fk { 
    .ac; color:@blue;.p10;border:none;background:none;
    a {.db; margin:0 auto; width:100px; line-height:40px; height:40px; background:@blue; border-radius:20px; color:#fff;.f16; font-weight:bold;}
    }
  dd {
    border-bottom:1px solid #dadad8;.p10;padding-left:70px; .pr; min-height:50px;
    img { width:50px; height:50px;.pa; left:10px; top:10px; }
    p {
      padding:1px 0; .f14;clear:both; 
      span { float:right; }
      }
    }
  dd:last-child{
    text-align:right; .p10;line-height:23px;
    // border:none;
    p { 
      padding:5px 0; text-align:left; height:35px;line-height:35px;
      a { float:right; }
    }
  }
}
.ddxq {.pa; width:@w100; height:60%; z-index:20;}
.inputlist { overflow:scroll;}
.applyg-pop {
  ul {max-height:200px; overflow-y: scroll;}
}
//弹框
.pay {
  .ac;
  i{ margin-right: 10px;margin-top: -5px;}
  h1 { font-size: 35px; font-weight: bold; color:#3bb7d9; margin-top: 30px;}
  p { font-size: 21px;color:#3bb7d9;}
  section {background: #dbf5fb; padding: 25px 5px; font-size: 16px; color: #3bb7d9; margin: 30px 10px; line-height: 25px;}
  a { .db; width: 60%; margin: 20px auto;background: #22c5e5; color: #fff; font-size: 17px; .ac; height: 44px; line-height: 44px; border-radius: 22px;}
}
//样式二

.style-two {
    background: #363543;
   .list-01 li span {color:#adadb3;}
    .apply{
      .btn-style {background: #35405e; color: #fff; }
      li {color:#aaa; }
      .count { color:#aaa;}
      .a-list{
          a { border:none;  color: #fff; }
          a:first-child { background:#7b55fa; }
          a:nth-child(2) { background:#24d4a5; }
          a:nth-child(3) { background:#fd4583; }
          a:nth-child(4) { background:#c2a434; }
          a:nth-child(5) { background:#5fcfff; }
      }
    } 
    .order-title{ background:#504f5f; border:none; }

    .order-xq {
        li ol li:first-child { color:#fefefe;}
        p{color:#fefefe;}
    }
    .dow-app {background:#307ffe; color:#fff;  }
    .rank-mileage h6.all {background:#4f4f5e; margin-top:0; }
    .rank-mileage h6 a.line {border-bottom: 2px solid #3BB7D9; color: #3BB7D9;}
    .rank-mileage h6.all a {position: relative; bottom:-1px }
    .c-expalain span {border:1px solid #38b7d8; background:rgba(53,64,94,.8); color:#38b7d8; }
    .c-expalain:after { border-top: 1px solid rgba(53,64,94,.8);}
    .image-text {color:#b0b0b0;}
    .data-rank {
         color:#adadb3; font-size:14px;
         span { font-size:10px; color:#fff; }
        }
    .certificate { 
        background: url(../images/bg/zstop.jpg) no-repeat center top,
        url(../images/bg/zsbt.jpg) no-repeat center bottom,
        url(../images/bg/zsmd.jpg) repeat-y center center;
        background-size: 100% auto, 100% auto, 100% 55%;
        .host { right:12%; bottom:50px; }
      }
     //证书
}


//样式三

.style-three {
    
     background: #45412e;
     .apply{
      .btn-style {background: #8b8b8b; color: #fff; }
      li {color:#aaa; }
      .count { color:#aaa;}
      .bar span {background:#ecb021; border:2px solid #fff; width:6px; height:6px;}
      .bar span.gray {background:#adadb3;}
      .bar p {background:#ecb021;}
      .a-list{
          a { border:none;  background: #a1632d; color:#fff; }
        }
      } 
    .order-title{ background:#45412e; border-bottom:1px solid #696759; }
    .order-xq {
      li ol li { 
          color:#fff;
          span {color:#fff;}
        }
        li ol li:first-child { color:#ecb021;}
      p{
        color:#fefefe;
        .color-blue {color:#ecb021; }
        }
    }
    .buy {background:#ecb021; }
    .rank-mileage h6 a.line {border:none; color: #fff;}
    .dow-app {background:#ecb021; color:#fff; border:none; border-radius:0;}
    .rank-mileage h6.all {background:#45412e; border-width:1px; }
    .rank-mileage h6.all a {border:none; }
    .rank-mileage h6.all a:first-child { border-right:1px solid #696759;}
    .c-expalain span {background:#45412e; color:#fff; }
   
    .image-text {color:#fefefe}
    .c-mask .pop-up {background:#fff; border-radius:0; }
    .c-mask input { border-radius:0; }
    .certificate {
      background: url(../images/bg/zs.png) no-repeat center 10px,
      url(../images/bg/logo.png) no-repeat 20px bottom,
      url(../images/bg/zsds.png) repeat-y center center;
      background-size: 70% auto, 30% auto, 100% 55%;
      .competitor {color:#fff;}
    }
    .certificate ul li {color:#fff}
    .certificate ul li p {border-bottom: 1px solid #efefef;}
    .target {color:#fff; }
    .host {color:#fff; bottom:15px;}
    .data-rank li { color:#e7ac21;}
    .rank-mileage li {color: #fff; }
}





